<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        /* w3c盒子 内容盒子 标准盒子 */
        /* 
            w3c盒子的宽
                内容区的宽+左右border+左右padding
                100px+2px+20px=122px
            w3c盒子的高
                内容区的高+上下border+上下padding
                100px+2px+20px=122px
            所占页面空间盒子的宽
                内容区的宽+左右border+左右padding+左右margin
                122px+20px=142px
            所占页面空间盒子的高
                内容区的高+上下border+上下padding+上下margin
                122px+20px=142px
                特点:宽高设置给盒子的内容区的 设置给content
        */
        /* 边框盒子 怪异盒子 IE盒子 */
        /* 
            边框盒子的宽怎么计算
                width=content的宽+borderLeft+borderRight+paddingLeft+paddingRight
                100px=78px+2px+20px
            边框盒子的高怎么计算
                height=content的高+borderTop+borderBottom+paddingTop+paddingBottom
                100px=78px+2px+20px
            边框盒子所占页面宽高怎么计算
                宽:width+marginLeft+marginRight
                100px+20px=120px
                高:height+marginTop+marginBottom
                100px+20px=120px
            特点:边框盒子的宽高直接设置给盒子
        */
        div{
            /* 设置盒模型属性 */
            /* w3c盒子 内容盒子 标准盒子 */
            /* box-sizing: content-box; */
            /* 边框盒子 怪异盒子 IE盒子*/
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #666;
            padding: 20px;
            margin: 10px;
            /* 将div转换为行内块元素 */
            display: inline-block;
            /* 将div转为行内元素 */
            /* display: inline; */
            /* 将行内元素转换为块级元素 */
            /* display: block; */
        }
        /* 面试题怎么问?
            1.说一说盒子模型?
                1.说一说盒子的组成以及盒子的种类.
                    盒子组成:width+border+height+padding+margin
                    盒子种类:{
                        1.内容盒子 w3c盒子 标准盒子 box-sizing:content-box
                        2.边框盒子 怪异盒子 IE盒子 box-sizing:border-box
                    }
                2.说一说两种盒子的特点.
                    内容盒子特点:宽高设置给盒子内容区的宽高
                    边框盒子特点:宽高直接设置给盒子的
        */
    </style>
</head>
<body>
    <div>
        axure
    </div>
    hello
</body>
</html>